<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  p{
	padding:0;
	margin:0;
  }
  .photobox {
  width: 400px;
  height: 300px;
  border: 1px solid green;
  margin: 130px auto;
  position: relative;
  }
  img {
	width: 400px;
	height: 300px;
  }

  .zbox {
	width: 40px;
	height: 20px;
	background: #e7e7e7;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	border: 1px solid green;
	border-radius: 2px;
	position: absolute;
	left: -44px;
	bottom: 0px;
  }

  .ybox {
	width: 40px;
	height: 20px;
	background: #e7e7e7;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	border: 1px solid green;
	border-radius: 2px;
	position: absolute;
	right: -44px;
	bottom: 0px;
  }

  .photoone{
	display: none;
  }

 
  </style>

 </head>
 <body>
 <div class='zdbox'>
	 <div class='photobox'>
			<img src='img/1.png' class="" id='tpone'/>
			<img src='img/2.png'/>
			<img src='img/3.png'/>
			<img src='img/4.png'/>
			<p class='zbox'>上一张
			</p>
			<p class='ybox' id='lastbox'>下一张
			</p>
	 </div>
 </div>
 
 </body>
</html>

<script>
var oLastbox = document.getElementById('lastbox');
var oTpone = document.getElementById('tpone');
oLastbox.onclick = function(){
	oTpone.className = 'photoone';
};
/*var oBox = document.getElementById('box');
var oBoxc = document.getElementById('boxc');
//oBoxc.className = 'boxb';
oBox.onmouseover = function(){
	oBoxc.className = 'boxb';
};*/
</script>
